<template>
    <footer id="intercom-contact">
        <div class="malus-service">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-6">
                        <div class="service-item"><span class="icon icon-num">百万</span> <span class="desc">{{$t('footer_service_li_1')}}</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="service-item"><span class="icon"><i class="ri-shield-star-line"></i></span> <span
                            class="desc">{{$t('footer_service_li_2')}}</span></div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="service-item"><span class="icon"><i class="ri-question-answer-line"></i></span>
                            <span
                                class="desc">{{$t('footer_service_li_3')}}</span></div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="service-item"><span class="icon"><i class="ri-thumb-up-line"></i></span> <span
                            class="desc">{{$t('footer_service_li_4')}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="malus-container container d-md-block d-none">
            <div class="subfooter">
                <div class="subfooter-section"><h5 class="subfooter-title">{{$t('footer_menu_down_title')}}</h5>
                    <ul>
                        <li><a href="/chrome?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_1')}}</a></li>
                        <li><a href="/ios?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_2')}}</a>
                        </li>
                        <li><a href="/android?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_3')}}</a></li>
                        <li><a href="/mac?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_4')}}</a>
                        </li>
                        <li><a href="/windows?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_5')}}</a></li>
                        <li><a href="/tv?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_down_li_6')}}</a>
                        </li>
                    </ul>
                </div>
                <div class="subfooter-section"><h5 class="subfooter-title">{{$t('footer_menu_about_title')}}</h5>
                    <ul>
                        <li><a href="/news/list?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_1')}}</a></li>
                        <li><a href="/terms?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_2')}}</a></li>
                        <li><a href="/privacy?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_3')}}</a></li>
                        <li><a href="/sla?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_4')}}</a></li>
                        <li><a href="/fake-apps?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_5')}}</a></li>
                        <li><a href="/changelog?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_about_li_6')}}</a></li>
                    </ul>
                </div>
                <div class="subfooter-section"><h5 class="subfooter-title">{{$t('footer_menu_service_title')}}</h5>
                    <ul>
                        <li><a href="/signup?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_1')}}</a></li>
                        <li><a href="/active?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_2')}}</a></li>
                        <li><a href="/dashboard?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_3')}}</a></li>
                        <li><a href="/dashboard/forgot?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_4')}}</a>
                        </li>
                        <li><a href="/status?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_5')}}</a></li>
                        <li><a href="/support?utm_source=website&amp;utm_medium=footer" target="_self">{{$t('footer_menu_service_li_6')}}</a></li>
                    </ul>
                </div>
                <div class="subfooter-section news"><h5 class="subfooter-title">{{$t('footer_menu_about_title')}}</h5>
                    <ul>
                        <li><a
                            href="/blog/d--%E7%BE%8E%E9%A3%9F%E7%89%87%E6%8E%A8%E8%8D%90%EF%BC%8C%E9%A6%8B%E5%93%AD%E6%B5%B7%E5%A4%96%E5%85%9A%EF%BC%8C%E6%98%AF%E6%97%B6%E5%80%99%E5%8F%91%E6%8C%A5%E4%BD%A0%E7%A7%8D%E6%97%8F%E5%A4%A9%E8%B5%8B%E4%BA%86--1Gd_TpXW4qqhm7sXrxTT0BpwC-deiEIhnOoz3WO2CD3Q?utm_source=website&amp;utm_medium=footer"
                            target="">美食片推荐，馋哭海外党，是时候发挥你种族天赋了</a></li>
                        <li><a
                            href="/blog/d--2021%E5%BC%80%E5%B9%B4%E5%A4%A7%E6%88%8F%E7%9B%98%E7%82%B9%EF%BC%8C%E6%B5%B7%E5%A4%96%E7%9C%8B%E4%B8%8D%E4%BA%86%E5%9B%BD%E5%86%85%E8%A7%86%E9%A2%91%EF%BC%8C%E7%94%A8Malus%E4%B8%80%E9%94%AE%E5%9B%9E%E5%9B%BD%E5%8A%A0%E9%80%9F--19c017r2kKaUZ83ybq2Ll9zAnRGNqFQKJTf3EMBpY4cI?utm_source=website&amp;utm_medium=footer"
                            target="">2021开年大戏盘点，海外看不了国内视频，用Malus一键回国加速</a></li>
                        <li><a
                            href="/blog/d--%E8%B1%86%E7%93%A39.3%EF%BC%8C%E8%BF%99%E9%83%A8%E8%89%AF%E5%BF%83%E5%9B%BD%E4%BA%A7%E7%89%87%E5%BA%94%E8%AF%A5%E5%88%B7%E7%88%86%E6%9C%8B%E5%8F%8B%E5%9C%88--1_5oy90ymUPXr2OBc5oOA5PfeJoEYI7IC6DLque7PjkY?utm_source=website&amp;utm_medium=footer"
                            target="">豆瓣9.3，这部良心国产片应该刷爆朋友圈</a></li>
                        <li><a
                            href="/blog/d--%E8%B1%86%E7%93%A3%E5%BC%80%E6%92%AD9.1%E5%88%86%EF%BC%8C%E8%BF%99%E9%83%A8%E6%97%A5%E6%BC%AB%E5%B0%86%E5%BC%95%E8%BF%9B%E5%A4%AE%E8%A7%86--149moAusCJYiEc1Adrs9kj0tYiDx1mbf0zIwt1-qCX2o?utm_source=website&amp;utm_medium=footer"
                            target="">豆瓣开播9.1分，这部日漫将引进央视</a></li>
                        <li><a
                            href="/blog/d--2021%E5%B9%B4QS%E4%B8%96%E7%95%8C%E5%A4%A7%E5%AD%A6%E5%AD%A6%E7%A7%91%E6%8E%92%E5%90%8D%E5%8F%91%E5%B8%83%EF%BC%8C%E4%BD%A0%E7%9A%84%E5%AD%A6%E7%A7%91%E4%B8%8A%E6%A6%9C%E4%BA%86%E5%90%97%EF%BC%9F--1ZoijtpMbd2ZXxEi4v6MDWhjzPapYiF2e1_zmgcLosXY?utm_source=website&amp;utm_medium=footer"
                            target="">2021年QS世界大学学科排名发布，你的学科上榜了吗？</a></li>
                        <li><a
                            href="/blog/d--%E3%80%8A%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F2%E3%80%8B%E8%AE%A1%E5%88%92%E4%BB%8A%E5%B9%B4%E5%8F%91%E5%B8%83%EF%BC%8C%E6%88%96%E5%B0%86%E7%99%BB%E9%99%86PC%E5%92%8C%E6%89%8B%E6%9C%BA%E5%B9%B3%E5%8F%B0--1CG88_aTWH513vCs3aVHYEMzFyX6y1RLn9JV5U_kHjJc?utm_source=website&amp;utm_medium=footer"
                            target="">《绝地求生2》计划今年发布，或将登陆PC和手机平台</a></li>
                    </ul>
                </div>
                <div class="subfooter-section"><h5 class="subfooter-title">{{$t('footer_contact_title')}}</h5>
                    <div class="wechat-qr-wrapper">
                        <div class="wechat-qr-left"><img src="https://malus.s3cdn.net/uploads/contact-qr.png" alt="qr">
                        </div>
                        <div class="wechat-qr-right"><span>{{$t('footer_contact_desc')}}</span>
                            <div class="online-intercom">{{$t('footer_contact_button')}}</div>
                        </div>
                    </div>
                    <ul class="social-list">
                        <li><a class="icon-weibo" href="/r/weibo" target="_blank"><i
                            class="ri-weibo-fill"></i></a></li>
                        <li><a class="icon-qq" href="/r/qq"><i target="_blank" class="ri-qq-fill"></i></a></li>
                        <li><a class="icon-email" href="/r/email"><i class="ri-mail-fill"></i></a></li>
                        <li><a class="icon-facebook" href="/r/facebook" target="_blank"><i
                            class="ri-facebook-fill"></i></a></li>
                        <li><a class="icon-twitter" href="/r/twitter" target="_blank"><i
                            class="ri-twitter-fill"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="malus-blogroll"><strong>友情链接：</strong>
                <ul>
                    <li><a href="https://www.famiboat.com/" target="_blank">中国包裹邮寄</a></li>
                    <li><a href="https://hbew.com" target="_blank">海备转运</a></li>
                    <li><a href="https://bbs.sgcn.com/" target="_blank">新加坡狮城论坛</a></li>
                    <li><a href="https://taimienphi.vn/" target="_blank">Ttaimienphi.vn</a></li>
                </ul>
                <div class="payment-support"><img src="https://malus.s3cdn.net/uploads/malus_payment_way.png"
                                                  alt="payment"></div>
                <div class="fb-like fb_iframe_widget" data-href="https://getmalus.com" data-layout="button_count"
                     data-action="like" data-size="small" data-show-faces="true" data-share="true"
                     fb-xfbml-state="rendered"
                     fb-iframe-plugin-query="action=like&amp;app_id=212286525542165&amp;container_width=0&amp;href=https%3A%2F%2Fgetmalus.com%2F&amp;layout=button_count&amp;locale=zh_CN&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;size=small">
                    <span style="vertical-align: bottom; width: 150px; height: 28px;"><iframe name="f3bc3a442a31da"
                                                                                              width="1000px"
                                                                                              height="1000px"
                                                                                              data-testid="fb:like Facebook Social Plugin"
                                                                                              title="fb:like Facebook Social Plugin"
                                                                                              frameborder="0"
                                                                                              allowtransparency="true"
                                                                                              allowfullscreen="true"
                                                                                              scrolling="no"
                                                                                              allow="encrypted-media"
                                                                                              src="https://www.facebook.com/v3.2/plugins/like.php?action=like&amp;app_id=212286525542165&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df21a2ce9ab64b7c%26domain%3Dgetmalus.com%26origin%3Dhttps%253A%252F%252Fgetmalus.com%252Fff2906f7f5b3c8%26relation%3Dparent.parent&amp;container_width=0&amp;href=https%3A%2F%2Fgetmalus.com%2F&amp;layout=button_count&amp;locale=zh_CN&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;size=small"
                                                                                              class=""
                                                                                              style="border: none; visibility: visible; width: 150px; height: 28px;"></iframe></span>
                </div>
            </div>
        </div>
        <div class="malus-footer">
            <div class="malus-container container footer">
                <div class="row justify-content-center">
                    <div class="copyright col-md-6 col-12"><p>© 2018-2021 Malus. All rights reserved.</p></div>
                    <ul class="nav-footer col-md-6 col-12">
                        <li><a href="/affiliate?utm_source=website&amp;utm_medium=footer" target="_self">推荐返现</a></li>
                        <li><a href="/agency?utm_source=website&amp;utm_medium=footer" target="_self">代理商加盟</a></li>
                        <li><a href="/ads?utm_source=website&amp;utm_medium=footer" target="_self">广告服务</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</template>

<script>
export default {
    name: "AppFooter"
}
</script>

<style scoped lang="scss">
@media (max-width: 768px) {
    .banner  {
        padding-top: 108px;
        img {
            margin-top: 0!important;
        }
    }
    .malus-service {
        .icon-num {
            width: 40px!important;
            height: 40px!important;
            border: 1px solid #B5B2FD!important;
            border-radius: 50%!important;
            display: flex!important;
            align-items: center!important;
            justify-content: center!important;
            font-size: 16px!important;
            font-weight: 500!important;
            color: #4D55E8!important;
            flex-shrink: 0!important;
        }
        .icon {
            width: 40px!important;
            height: 40px!important;
            border: 1px solid #B5B2FD!important;
            border-radius: 50%!important;
            display: flex!important;
            align-items: center!important;
            justify-content: center!important;
            font-size: 16px!important;
            font-weight: 500!important;
            color: #4D55E8!important;
            flex-shrink: 0!important;
        }
        i {
            font-size: 20px!important;
            color: #4D55E8;
        }
        .desc {
            font-size: 14px!important;
            margin-left: 6px!important;
        }
    }
    .footer {
        padding: 24px 0;
        height: auto!important;
        .row {
            margin: auto;
        }
    }
    .nav-footer {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        padding: 0!important;
        li:first-child {
            flex: none!important;
        }
        li {
            flex: 1!important;
            a {
                margin-right: 0!important;
            }
        }
    }
    .copyright {
        justify-content: center;
        padding: 0!important;
    }
}
#intercom-contact {
    background: #fbfbff;

    .malus-service {
        background: #FFF;
        box-shadow: inset 0 1px 0 #f4f4f4;

        .container {
            justify-content: space-between;
            height: 128px;
            align-items: center;
            .row {
                height: 100%;
                align-items: center;
            }

            .service-item {
                align-items: center;
                display: flex;

                .icon {
                    font-size: 16px;
                    width: 52px;
                    height: 52px;
                    border: 1px solid #B5B2FD;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    color: #4D55E8;
                }

                .desc {
                    margin-left: 24px;
                    font-size: 18px;
                    font-weight: 500;
                    color: #333;
                }
            }
        }
    }

    .malus-container {
        .subfooter {
            padding: 56px 0;
            display: flex;
            justify-content: space-between;
            .subfooter-section {
                .subfooter-title {
                    font-size: 14px;
                    font-weight: 500;
                    color: #333;
                }
                ul {
                    margin-top: 24px;
                    list-style: none;
                    padding: 0;
                    li {
                        font-size: 13px;
                        color: #7b7b7b;
                        margin-bottom: 14px;
                        a {
                            color: #7b7b7b;
                        }
                    }
                }
            }
            .subfooter-section.news a {
                display: block;
                max-width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 13px;
            }
            .subfooter-title {
                h5 {
                    font-size: 14px;
                    font-weight: 500;
                    color: #333;
                }
            }
            .wechat-qr-wrapper {
                margin-top: 22px;
                display: flex;
                align-items: center;
                .wechat-qr-left {
                    img {
                        width: 120px;
                        margin-right: 24px;
                    }
                }
                .wechat-qr-right {
                    span {
                        display: block;
                        max-width: 130px;
                        font-size: 14px;
                        color: #333;
                        line-height: 1.64;
                    }
                    .online-intercom {
                        margin-top: 16px;
                        width: 100%;
                        height: 38px;
                        border: 1px solid #4d55e8;
                        color: #4d55e8;
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        font-size: 15px;
                    }
                }
            }
        }
        .social-list {
            margin-top: 12px!important;
            display: flex;
            justify-content: space-between;
            li {
                font-size: 13px;
                color: #7b7b7b;
                margin-bottom: 14px;
                a {
                    font-size: 24px;
                    width: 32px;
                    height: 32px;
                    border-radius: 16px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i {
                        color: #4d55e8;
                        font-size: 22px;
                    }
                }
            }
        }
    }
    .malus-blogroll {
        display: flex;
        height: 40px;
        align-items: center;
        font-size: 12px;
        box-shadow: inset 0 1px 0 #f4f4f4;
        strong {
            color: #7b7b7b;
            font-weight: 400;
        }
        ul {
            padding-left: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            li {
                a {
                    color: #666;
                    font-size: 12px;
                    margin-right: 16px;
                }
            }
        }
        .payment-support {
            margin-left: auto;
            margin-right: 32px;
            display: flex;
            align-items: center;
            img {
                width: 250px;
            }
        }
    }
    .malus-footer {
        background: #fff!important;
        box-shadow: inset 0 1px 0 #f4f4f4;
        .row {
            height: 100%;
            width: 100%;
        }
        .footer {
            position: relative;
            height: 72px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .copyright {
                font-size: 12px;
                color: #7b7b7b;
                align-items: center;
                display: flex;
                width: 100%;
                p {
                    margin-top: 0;
                    font-size: 12px;
                    line-height: 1.6;
                    color: #7B7B7B;
                }
            }
            .nav-footer {
                text-align: right;
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-width: 180px;
                list-style: none;
                li:nth-child(1) {
                    flex: 1;
                }
                li {
                    a {
                        color: #333;
                        margin-right: 24px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>
